<template>
    <ui-main title="echart - 百度图表">
        <div class="item one">
            <div class="ui flex row-around">
                <div class="item one" style="height:500px">
                    <!-- 柱状图 -->
                    <ui-echarts  :option="bar" ref="uiChart" width="500px" height="400px" @node-zr-click='nodeZrClick'></ui-echarts>
                </div>
                <div class="item one" style="height:500px; background: #333;">
                    <!-- 饼图 -->
                    <ui-echarts dark :option="pie" width="400px" height="400px"></ui-echarts>
                </div>
            </div>
            <div slot="toolbar" class="ui flex col-center">
                <a class="ui teal button mini" href="http://echarts.baidu.com/examples.html">echart文档</a>
                <a class="ui blue button mini"
                    href="http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts">echart的按需引入表
                </a>
            </div>
        </div>
        <div class="item one">
            <ui-load-md file="echarts.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>

    export default {
        data(){
            return {
                bar:{
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'直接访问',
                            type:'bar',
                            barWidth: '60%',
                            data:[10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                },
                pie:{
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ]
                        }
                    ]
                }
            }
        },
        methods:{
            nodeZrClick(item) {
                console.log(Math.abs(item))
            }
        },
        mounted() {
            this.$refs.uiChart.InsChart().then(value => {
                value.getZr().on('click', (params) => {
                    let pointInPixel = [params.offsetX, params.offsetY]
                    if (value.containPixel('grid', pointInPixel)) {
                        let xIndex = value.convertFromPixel({
                            seriesIndex: 0
                        }, [params.offsetX, params.offsetY])[0]
                        console.log(xIndex)
                    }
                })
            })
        }
    }
</script>
